<template>
  <div class="home" v-infinite-scroll="loadAtricle" :infinite-scroll-immediate="false">
    <el-skeleton class="skeleton" :rows="10" animated :loading="isShowSkeleton" />
    <!-- 文章列表 -->
    <el-card class="content_card" v-for="(item, i) in note.list" :key="i" v-show="!isShowSkeleton">
      <div class="text_box">
        <ActicleHeader @clickTitle="toContent(item)" :articleData="item"></ActicleHeader>
        <div class="text_footer">
          <div class="text_content">
            <p>{{ item.articleDesc }}</p>
          </div>
          <div class="button_box">
            <button @click="toContent(item)">查看全文 »</button>
          </div>
        </div>
      </div>
    </el-card>
    <!-- 分页 -->
    <!-- <el-card class="page_card" v-show="!isShowSkeleton">
      <el-pagination background layout="prev, pager, next" :total="totalPage" @current-change="currentChange"
        :page-size="pageSize">
      </el-pagination>
    </el-card> -->
  </div>
</template>

<script setup lang="ts">
import { GetArticleList } from "@/api/home";
import ActicleHeader from "@/components/common/ActicleHeader.vue";
import { ElMessage } from "element-plus";
import { ref, reactive } from 'vue'

const router = useRouter();
interface Data {
  code?: number,
  data: {
    list: [],
    totalPage: number
  },
  msg?: string
}
let isShowSkeleton = ref(true);
let totalPage = 0;
let page = 1;
let pageSize = 10;
let note = reactive({
  list: [{
    id: 0,
    articleDesc: ""
  }]
});

// 获取文章列表数据
const getAllAtricle = async (page = 1) => {
  const { code, data, msg }: Data = await GetArticleList({
    page,
    pageSize,
  });

  if (code !== 200) {
    ElMessage({
      message: msg,
      type: "error",
    });
    return
  }


  if (page == 1) {
    note.list = reactive(data.list);
  } else note.list = [...note.list, ...data.list]

  totalPage = data.totalPage;
  isShowSkeleton.value = false;
}
getAllAtricle();

// 加载文章列表
const loadAtricle = () => {
  page++;
  if (page <= totalPage) getAllAtricle(page)
}
// const currentChange = (currentPage: number) => {
//   getAllAtricle(currentPage);
// }

// 查看文章详情跳转
interface Content {
  id: number,
  articleDesc: string
}
const toContent = ({ id }: Content) => {
  try {
    router.push({ path: '/BlogContent', query: { id } });
  } catch (error) {
    console.log(error);
  }

}


</script>

<style lang="less" scoped>
@import url(@/assets/css/globalColor.less);
@card-width: 66vw;

.home {
  width: 100%;

  // min-height: 100vh;
  .skeleton {
    width: @card-width;
  }

  .content_card {
    height: auto;
    width: @card-width;
    border-radius: 15px 15px 15px 15px;
    margin-bottom: 10px;

    // justify-content: center;
    .text_box {
      display: flex;
      flex-direction: column;
      align-items: center;

      .text_title {
        width: 100%;
        text-align: center;
        font-size: 26px;
        font-weight: 400;
        margin: 10px 0 0px;
        color: #555;
      }

      .text_info_box {
        width: 100%;
        text-align: center;
        margin: 5px 0 15px;

        span {
          color: #999;
          font-size: 13px;
        }
      }

      .text_footer {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 100%;

        .text_content {
          width: 100%;
          text-indent: 2em;
          color: #555;

          p {
            font-size: 14px;
            line-height: 28px;
          }
        }

        .button_box {
          margin-top: 20px;

          button {
            // margin-top: 20px;
            padding: 0 20px;
            font-size: 14px;
            color: @theme-color;
            background: #fff;
            border: 2px solid @theme-color;
            text-decoration: none;
            transition-property: background-color;
            transition-duration: 0.2s;
            transition-timing-function: ease-in-out;
            transition-delay: 0s;
            line-height: 2;
            border-radius: 5px;
            cursor: pointer;
          }

          button:hover {
            color: #fff;
            background-color: @theme-color;
            border: 2px solid @theme-color;
          }
        }
      }
    }
  }

  .page_card {
    height: auto;
    width: @card-width;
    border-radius: 15px 15px 15px 15px;
    margin-bottom: 10px;
    text-align: center;

    .el-pagination {
      justify-content: center;
    }
  }
}

@media screen and (max-width: 1200px) {
  .home {
    .skeleton {
      width: auto;
      margin: 0 7px;
    }

    .content_card {
      width: auto;
      margin: 7px;

      .button_box {
        margin-top: 10px;
      }
    }

    .page_card {
      width: auto;
      margin: 0 7px 7px;
    }

    .el-page-header {
      margin-bottom: 10px;
    }
  }
}
</style>